<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>销售台账-详细</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=f5a12a1d">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        .model-picker-input {
            opacity: 0 !important;
            top: -9999px;
            left: -9999px;
            position: absolute;
        }

        .model-picker-span {
            position: relative;
            display: block;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            border-bottom: 1px solid #ccc;
            background-color: #fff;
            color: #ccc;
            cursor: pointer;
        }

        .jiaobiao {
            position: relative;
        }

        .jiaobiao i {
            display: block;
            width: 0;
            height: 0;
            border-width: 0px 0 12px 12px;
            border-style: solid;
            border-color: transparent transparent transparent #2a8cec;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .table-detail td.twoLine {
            line-height: 1.5 !important;
            padding: 3px 0 !important;
        }
        .model-picker-span > .placeholder {
            color: #aaa;
        }

        .model-picker-span > .arrow {
            position: absolute;
            top: 50%;
            right: 8px;
            width: 10px;
            margin-top: -3px;
            height: 5px;
            background: url(../images/drop-arrow.png) -10px -25px no-repeat;
        }

        .model-picker-span.focus,
        .model-picker-span.open {
            border-bottom-color: #46A4FF;
        }

        .model-picker-span.open > .arrow {
            background-position: -10px -10px;
        }

        .model-picker-span > .title > span {
            color: #333;
            padding: 5px;
            border-radius: 3px;
        }

        .model-picker-span > .title > span:hover {
            background-color: #f1f8ff;
        }

        .model-picker-dropdown {
            position: absolute;
            width: 315px;
            left: -9999px;
            top: -9999px;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            z-index: 999999;
            display: none;
            min-width: 200px;
            margin-bottom: 20px;
            margin-top: 5px;
        }

        .model-select-wrap {
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
        }

        .model-select-tab {
            border-bottom: 1px solid #ccc;
            background: #f5f5f5;
            font-size: 13px;
        }

        .model-select-tab > a {
            display: inline-block;
            padding: 4px 20px;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid transparent;
            color: #4D4D4D;
            text-align: center;
            outline: 0;
            text-decoration: none;
            cursor: pointer;
            font-size: 14px;
            margin-bottom: -1px;
        }

        .model-select-tab > a.active {
            background: #fff;
            border-bottom: 1px solid #fff;
            color: #46A4FF;
        }

        .model-select-tab > a:first-child {
            border-left: none;
        }

        .model-select-tab > a:last-child.active {
            border-right: 1px solid #ccc;
        }

        .model-select-content {
            width: 100%;
            min-height: 50px;
            background-color: #fff;
            padding: 5px 5px;
        }

        .model-select {
            font-size: 16px;
        }

        .model-select dl {
            line-height: 2;
            clear: both;
            padding: 3px 0;
            margin: 0;
            max-height: 200px;
            overflow-y: scroll;
        }

        .model-select dt {
            position: absolute;
            width: 2.5em;
            font-weight: 500;
            text-align: right;
            line-height: 2;
        }

        .model-select dd {
            margin-left: 0;
            line-height: 2;
        }

        .model-select.province dd {
            margin-left: 3em;
        }

        .model-select a {
            display: inline-block;
            padding: 0 10px;
            outline: 0;
            text-decoration: none;
            white-space: nowrap;
            margin-right: 2px;
            text-decoration: none;
            color: #333;
            cursor: pointer;
        }

        .model-select a:hover,
        .model-select a:focus {
            background-color: #f1f8ff;
            border-radius: 2px;
            color: #46A4FF;
        }

        .model-select a.active {
            background-color: #46A4FF;
            color: #fff;
            border-radius: 2px;
        }

        .table-detail input[type=text] {
            padding-left: 0 !important;
        }

        td {
            color: #2a8cec;
        }

        td.td-title, td select, td .filename, td.td-module {
            color: #333;
        }

        select {
            color: rgb(42, 140, 236) !important;
            background: #fff;
        }

        .table-detail td {
            font-size: 14px;
            line-height: 29px;
            height: 29px;
            border-right: 1px solid #cbcbcb;
            border-bottom: 1px solid #cbcbcb;
        }

        .table-detail td.td-title {
            line-height: 1.5;
            font-size: 12px;
            height: 29px;
            line-height: 29px;
        }

        .table-detail td.td-row3 {
            height: 70px;
            line-height: 20px;
            max-height: 70px;
            overflow: hidden;
            position: relative;
        }

        .yuying {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 20px;
            height: 20px;
            background: url("/dist/img/yuyin.png");
            background-size: cover;
            cursor: pointer;
        }

        input {
            text-align: left !important;
        }

        .table-detail td.td-value {
            text-align: left !important;
            padding-left: 6px !important;
            font-size: 14px !important;
        }

        .btn-group-xs > .btn, .btn-xs {
            padding: 1px 5px;
            font-size: 16px;
            line-height: 1.5;
            border-radius: 3px;
        }

        .table-detail textarea {
            height: 60px;
            width: 100%;
            border: none;
            outline: none;
            -webkit-appearance: none;
            resize: none;
            line-height: 20px;
            padding-top: 2px !important;
            padding-left: 6px;
        }

        .td-row3 span {
            max-height: 60px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            text-align: left;

        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .td-module td {
            color: #333;
        }

        .table-detail {
            border-left: 1px solid #cbcbcb;
            border-top: 1px solid #cbcbcb;
        }

        .table-detail .td-module {
            background-color: #ebebeb;
        }

        .span-a-btn {
            position: absolute;
            right: 10px;
            margin-right: 19px;
        }

        .span-a-btn a {
            font-size: 20px;
        }
    </style>
</head>
<body>
<iframe id="ifAttach" style="display:none"></iframe>
<div class="div-td-content-more"><i></i></div>
<section class="content" id="app" v-cloak style="padding:0px;">
    <div class="center" style="overflow:auto;overflow-x:hidden;padding-left:8px;padding-right:8px;">
        <h4 class="text-center">销售台账详情</h4>
        <table class="table-detail">
            <tr class="td-module">
                <td colspan="4">基本信息</td>
            </tr>
            <template v-if="contract.main.buyerType==0 && pageType=='edit'">
                <tr>
                    <td class="td-title" >实际购车人</td>
                    <td class="td-value" >
                        <input type="text" v-if="pageType=='edit'" v-model="contract.main.actualCarBuyer"/>
                        <span v-else>{{contract.main.actualCarBuyer}}</span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title" >实际购车人电话</td>
                    <td class="td-value" >
                        <input type="text" v-if="pageType=='edit'" v-model="contract.main.actualCarBuyerTel"/>
                        <span v-else>{{contract.main.actualCarBuyerTel}}</span>
                    </td>
                </tr>
            </template>
            <template v-if="contract.main.buyerType==1 && pageType=='edit'">
                <tr>
                    <td class="td-title" >法人姓名</td>
                    <td class="td-value" >
                        <input type="text" v-if="pageType=='edit'" v-model="contract.main.legalRepresentativeName"/>
                        <span v-else>{{contract.main.legalRepresentativeName}}</span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title" >法人电话</td>
                    <td class="td-value" >
                        <input type="text" v-if="pageType=='edit'" v-model="contract.main.legalRepresentativeTel"/>
                        <span v-else>{{contract.main.legalRepresentativeTel}}</span>
                    </td>
                </tr>
            </template>
        </table>
        <div class="south no-print" style="height:50px;line-height:50px;text-align:center;">
            <input type="button" style="margin-left:20px;top: 10px;" value="返回" class="btn btn-primary btn-sm" @click="goBack" >
            <input type="button" style="margin-left:20px;" value="保存" class="btn btn-primary btn-sm" @click="save(0)" v-if="pageType != 'look'">
        </div>
    </div>
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=63aed32f"></script>
<script src="Template.js?t=42e28def"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/dist/js/pages/apply/business/class.js"></script>
<script type="text/javascript" src="/dist/js/pages/system/systemService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/commonService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/changeMoneyToChinese.js"></script>
<script type="text/javascript" src="/dist/plugins/print/print.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script>
    $(function () {
        $("body").on("click", ".td-row3 span", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }

    var api = '';
    if (IsPC()) {
        api = frameElement.api, W = api.opener;
    } else {
        function getCurrentUser() {
            var args = new Object();
            var query = location.href;
            var pairs = query.split("&"); //www.cxybl.com break at ampersand
            for (var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('='); // look for "name=value"
                if (pos == -1) continue; // if not found, skip
                var argname = pairs[i].substring(0, pos); // extract the name
                var pos1 = argname.indexOf('?');
                if (pos1 > -1) {
                    argname = argname.substring(pos1 + 1);
                }
                var value = pairs[i].substring(pos + 1); // extract the value
                value = decodeURIComponent(value); // decode it, if needed
                args[argname] = value; // store as a property
            }
            var ss = args.valueOf(0);
            obj = args;
            return args;
        }

        //获取url的参数
        function getUrlParamObj() {
            var args = new Object();
            var query = location.href;
            var pairs = query.split("&"); //www.cxybl.com break at ampersand
            for (var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('='); // look for "name=value"
                if (pos == -1) continue; // if not found, skip
                var argname = pairs[i].substring(0, pos); // extract the name
                var pos1 = argname.indexOf('?');
                if (pos1 > -1) {
                    argname = argname.substring(pos1 + 1);
                }
                var value = pairs[i].substring(pos + 1); // extract the value
                value = decodeURIComponent(value); // decode it, if needed
                args[argname] = value; // store as a property
            }
            var ss = args.valueOf(0);
            obj = args;
            return args;
        }

        $.wyui.page.urlParams = getUrlParamObj()
    }

    var app = new Vue({
        el: '#app',
        data: {
            id: $.wyui.page.urlParams.id ? $.wyui.page.urlParams.id : '',
            pageType: $.wyui.page.urlParams.pageType,//页面类型
            buyType: $.wyui.page.urlParams.buyType,
            zhihuan: $.wyui.page.urlParams.zhihuan,
            diankuan: $.wyui.page.urlParams.diankuan,
            companyId: $.wyui.page.urlParams.companyId ? $.wyui.page.urlParams.companyId : '',
            regionManagerName: $.wyui.page.urlParams.regionManagerName ? $.wyui.page.urlParams.regionManagerName : '',
            regionManagerId: $.wyui.page.urlParams.regionManagerId ? $.wyui.page.urlParams.regionManagerId : '',
            userId: $.wyui.page.urlParams.userId ? $.wyui.page.urlParams.userId : getCurrentUser().id,
            brandName: "利勃海尔",
            today: "",
            brandId: '',
            companyList: [],
            provinceList: [],
            cityList: [],
            contractTypeList: ['sales'],
            modelMessage: '',
            text: "",
            brandList:
                [],
            modelList:
                [],
            buyType: "全款",
            contract: {
                main: {city: ""},
                acceptance: {},
                commitment: {},
                confidentiality: {},
                guarantee: {},
                repaymentList: [],
                repaymentFQList: [],
                replacement:{
                    replacementsName: ['wjj'],
                    replacementsChineseName:'旧设备',
                    description: "",
                    wjj: [new Template.jiuJi('挖掘机')],
                    zzj: [new Template.jiuJi('装载机')],
                    qiChe: [new Template.qiChe()],
                    fangWu: [new Template.fangWu()],
                    other: [new Template.other()]

                },
                sales: {},
                supplementary: {},
                guarantorList:[new Template.guarantorTem()],
            },
            buyTypeList: [
                {name: '全款', value: '全款'},
                {name: '内部分期', value: '内部分期'},
                {name: '融资租赁', value: '融资租赁'},
            ]
        },
        computed: {
            getSalesTotal: function () {
                //（单价*数量)+gps+其他+手续费+服务费
                return fmoney(Number(this.contract.sales.dealNo) * Number(this.contract.sales.unitPrice) + Number(this.contract.sales.gpsCharge) + Number(this.contract.sales.otherCharge) + Number(this.contract.sales.serviceCharge) + Number(this.contract.sales.securityCharge) + Number(this.contract.sales.insurancePremium))
            }
        },
        methods: {
            goBack: function () {
                api.close();
            },
            changeReplacementsChineseName:function () {
                var newList=[];
                if(this.contract.replacement.replacementsName.length>0){
                    for(var i=0;i<this.contract.replacement.replacementsName.length;i++){
                        var data=this.contract.replacement.replacementsName[i];
                        if((data=='wjj'||data=='zzj')&&newList.indexOf('旧设备')<0){
                            newList.push('旧设备')
                        }
                        if(data=='qiChe'){
                            newList.push('旧汽车')
                        }
                        if(data=='fangWu'){
                            newList.push('旧商品房')
                        }
                        if(data=='other'&&this.contract.replacement.other[0].otherCondition){
                            newList.push(this.contract.replacement.other[0].otherCondition)
                        }
                    }
                }
                this.contract.replacement.replacementsChineseName=newList.join("/");
                console.log(this.contract.replacement.replacementsChineseName)
            },
            fmoney: function (s, n) {
                n = n > 0 && n <= 20 ? n : 2;
                s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
                var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1],
                    t = "";
                for (i = 0; i < l.length; i++) {
                    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
                }
                return t.split("").reverse().join("") + "." + r;
            },
            convertAuditFlagToName: function (flage) {
                if (flage == 1) {
                    return "已通过";
                }
                else if (flage == 2) {
                    return "已驳回";
                }
                else if (flage == 0) {
                    return "待审核";
                }
                else {
                    return "-";
                }
            },
            save: function (type) {
                var that = this;
                $.wyui.postMethod(urlConfig.contract.save, trimRN(that.contract), function (data) {
                    alert("操作成功");
                    var $iframe = top.findIframeByName("销售台账");
                    $iframe[0].contentWindow.refresh();
                    api.close();
                });
            },
            getNumber: function (str, number) {
                var returnNumber;
                var that = this;
                if (str == "担保") {
                    if (that.zhihuan === "1") {
                        number = Number(number) + 1;
                    }
                    if (that.diankuan === "1") {
                        number = Number(number) + 1;
                    }
                }
                if (str == "条款") {
                    if(that.buyType!='全款'){
                        number = Number(number) + 1;
                    }
                    if (that.zhihuan === "1") {
                        number = Number(number) + 1;
                    }
                    if (that.diankuan === "1") {
                        number = Number(number) + 1;
                    }
                }
                return that.number2big(number)
            },
            fmoney: function (s, n) {
                n = n > 0 && n <= 20 ? n : 2;
                s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
                var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1],
                    t = "";
                for (i = 0; i < l.length; i++) {
                    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
                }
                return t.split("").reverse().join("") + "." + r;
            },
            number2big: function (number) {
                switch (Number(number)) {
                    case 1:
                        return '一';
                        break;
                    case 2:
                        return '二';
                        break;
                    case 3:
                        return '三';
                        break;
                    case 4:
                        return '四';
                        break;
                    case 5:
                        return '五';
                        break;
                    case 6:
                        return '六';
                        break;
                    case 7:
                        return '七';
                        break;
                    case 8:
                        return '八';
                        break;
                    case 9:
                        return '九';
                        break;
                    case 10:
                        return '十';
                        break;
                }
            },
        },
        mounted: function () {
            var that = this;
            $.wyui.postMethod(urlConfig.contract.selectContractById, {id: that.id}, function (data) {
                that.contract = data;
            });

        }
    });
    $(function () {
        $("#txtParent").autoComplete({
            url: server.ip + "/weekPlan/getNameAndTel.json",
            render: function (r, panel) {
                for (var i = 0; i < r.length; i++) {
                    $("<li></li>").data("autoComplete",
                        r[i]).html("<a>" + r[i].customerName + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + r[i].customerTel + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (r) {
                console.log(r);
                app.business.main.customerId = r.customerId;
                app.business.main.customerName = r.customerName;
                app.business.main.customerTel = r.customerTel;
                app.business.main.customerCredit = r.customerCredit;
                app.business.main.competitorCondition = r.competitorCondition;
                app.business.main.existingDevice = r.existingDevice;
                return false;
            },
            extraParams: {createUserId: getCurrentUser().id},
            height: 210,
            width: 300
        });
    });
</script>
</body>
</html>